//获取图片地址
let imgArr = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg', './img/5.jpg', './img/6.jpg'];
//只有轮播效果，立即执行函数
(function(){
    let i = 0;
    setInterval(
        function () {
            i++;
            i == imgArr.length ? i = 0 : "";
            document.getElementsByClassName("box1")[0].src = `${imgArr[i]}`;
        }, 1500
    );
})();

//有轮播效果，并且能选择到某张图片
document.getElementsByTagName("div")[1].innerHTML += `<div class="dote"></div>`;
for (let index in imgArr) {
    let doteEle = document.getElementsByClassName("dote")[0];
    //创建圆点
    doteEle.innerHTML += `<span onclick="lun(${index})"></span>`;
}
let j;
//轮播函数，要传参
function lun(i) {
    //获取圆点
    let spEle = document.getElementsByClassName("dote")[0].children;
    //判断传参的i，如果是next，即下一张
    if (i == "next") {
        //遍历所有的圆点（遍历圆点相当于在遍历图片）
        for (let index in imgArr) {
            //如果最后一个圆点的背景色为白色，即当前展示的图片是最后一张
            if (spEle[imgArr.length - 1].style.backgroundColor == "white") {
                //则让i=0，即下标变为了0，然后从59行开始执行，就从第一张开始展示
                i = 0;
            }
            //如果下标为index的圆点背景色为白色，即当前展示的图片是下标为index的图片
            else if (spEle[index].style.backgroundColor == "white") {
                //则让i=index+1，但index是字符串，所有要先-0；
                //即下标变成了当前图片的下一张，然后从第59行开始执行
                i = index - 0 + 1;
            }
        }
    }
    //判断传参的i，如果是previous，即上一张，同下一张的写法
    if (i == "previous") {
        for (let index in imgArr) {
            if (spEle[0].style.backgroundColor == "white") {
                i = imgArr.length - 1;
            }
            else if (spEle[index].style.backgroundColor == "white") {
                i = index - 1;
            }
        }
    }
    //先遍历所有点，让所有点的背景颜色变成默认的
    for (let index in imgArr) {
        spEle[index].style.backgroundColor = "rgba(255, 255, 255, 0.5)";
    }
    // console.log(i);
    //每次调用前先清除时间函数
    clearInterval(j);
    //展示下标为i的图片（必须在进行时间函数前先展示传参进来的下标为i的图片，因为时间函数是先等一个时间再进行执行函数，就会出现第一张有多的时间展示）
    document.getElementsByClassName("box2")[0].src = `${imgArr[i]}`;
    //让下标为i的点变颜色，即让它选中（同61行原因）
    spEle[i].style.backgroundColor = "white";
    //进行时间函数，从选中的点的下一张开始
    j = setInterval(
        function () {
            //先遍历所有点，让所有点的背景颜色变成默认的
            for (let index in imgArr) {
                spEle[index].style.backgroundColor = "rgba(255, 255, 255, 0.5)";
            }
            //从选中的点的下一张开始进行时间函数，即下标加一
            i++;
            //如果下标等于图片数组的长度，就让下标等于0，即展示第一张
            i == imgArr.length ? i = 0 : "";
            //变图片
            document.getElementsByClassName("box2")[0].src = `${imgArr[i]}`;
            //变点的颜色
            spEle[i].style.backgroundColor = "white";
        }, 1500
    )
}
//打开网页就从下标为0的图片开始执行轮播函数
lun(0);
